<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>续费管理</title>
<link rel="shortcut icon" href="/images/user/favicon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/user/global.css" />
<link rel="stylesheet" type="text/css" href="/css/user/users/member_center.css"/>
<link rel="stylesheet" type="text/css" href="/css/dialog.css"/> 
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/dialog.min.js"></script>
<script type="text/javascript" src="/js/user/ntabs.js"></script>
<script type="text/javascript" src="/js/bstdialog.min.js"></script>
<script type="text/javascript" src="/js/ajaxDataFormat.js"></script>
<script type="text/javascript" src="/js/user/users/myservice/renew_manage.js"></script>
<style>
.title_bar {
	margin-bottom:0px;
}
.title_bar ul {
	width:100%;
	overflow:hidden;
	margin-bottom:0px;
	background:#fff;
}
.title_bar ul.tabs li a {
	font-size:14px;
	color:#333;
	margin:0;
}
.title_bar .tabs {
	padding:0;
	border:0;
	background-color:#fff;
}
.title_bar .tabs li.sta {
	float:left;
	width:91px;
	height:40px;
	text-align:center;
	line-height:40px;
	border:1px solid #d6d4d5;
	border-top:1px solid #d6d4d5;
	margin-right:-1px;
	cursor:pointer;
	background:#fafafa;
	font-weight:normal;
}
.title_bar .tabs li.active {
	float:left;
	background:#fff;
	width:90px;
	height:40px;
	text-align:center;
	line-height:40px;
	border:1px solid #b1dae4;
	border-top:1px solid #008fb5;
	margin-right:-1px;
	cursor:pointer;
	border-bottom:1px solid #fff;
}
.tab_container {
	z-index:-1;
	padding:20px;
	line-height:24px;
	border:1px solid #d6d4d5;
	margin-top:-1px;
}

.tab_content table td {
	border-left:0px;
	border-right:0px;
	border-top:0px;
}
</style>
</head>
<body>
<div class="Wrapper">
	<!--我的服务头部-->
	<jsp:include page="../../common/member/memberHeader.jsp"></jsp:include>
    <!--我的服务头部-->
    <!--我的服务中间部分-->
    <div class="uc_bd mt20 mb20 ">
    	<div class="uc_layer">
            <div class="account">
                <!--我的服务左侧-->
                <jsp:include page="service_menu.jsp"></jsp:include>
            	<!--我的服务左侧-->
                <!--我的账户右侧-->
                <div class="member_r fr">
                	<div class="uitopb uitopb_border">
                    	<div class="lm-t tabs">我的服务>续费管理</div>
                        <div class="uc_content order title_bar">
						<ul class="tabs" id="mytab">
							<li class="active" onclick="nTabs(this,0);"><a href="#tab1">到期前续费</a></li>
						    <li class="sta" onclick="nTabs(this,1);"><a href="#tab2">急需续费</a></li>
						</ul>
						<div class="tab_container">
							<div id="mytab_Content0" class="tab_content" style="display:block;">
						    	<div class="filt_options">
							        <span>到期时间：</span>
									<select id="select_time" class="J_topSelect mr6" name="_fm.e._0.e">
							        <option value="" disabled="disabled">请选择时间范围</option>
							        <option value="7" selected="selected">7天内到期</option>
							        <option value="15">15天内到期</option>
							        <option value="30">30天内到期</option>
							        </select>
						        </div>
						    	<table class="table">
							      <thead>
							        <tr>
							         <th>订单编号</th>
							         <th>产品名称</th>
							          <th>金额（元）</th>
							          <th>到期时间</th>
							          <th>到期天数</th>
							          <th>是否开通</th>
							          <th>操作</th>
							        </tr>
							      </thead>
							      <tbody id="renewList"></tbody>
							    </table>
						  	</div>
						    <div id="mytab_Content1" class="tab_content" style="display:none;">
						    	<table class="table">
							      <thead>
							        <tr>
							         <th>订单编号</th>
							         <th>产品名称</th>
							          <th>金额（元）</th>
							          <th>到期时间</th>
							          <th>到期后天数</th>
							          <th>是否开通</th>
							          <th>操作</th>
							        </tr>
							      </thead>
							      <tbody id="extendRenewList"></tbody>
							    </table>
						    </div>
						</div>
                      	</div>
                    </div>
                </div>
                <!--我的服务右侧-->
                <div class="cl"></div>
			</div>
      	</div>
    </div>
    <!--我的服务中间部分-->
    <!---------------------------------footer------------------------------------>
  	<jsp:include page="../../common/footer.jsp"/>
  	<!---------------------------------footer结束------------------------------------>
</div>
<script type="text/javascript" src="/js/member-center.js"></script>
<script type="text/javascript" src="/js/user/users/member_center/menu_line.js"></script>
</body>
</html>
